<template>
	<view>
		<uv-drop-down ref="dropDown" sign="dropDown_1" :text-style="textStyle" :extra-icon="extraIcon"
			:extra-active-icon="extraActiveIcon" :defaultValue="defaultValue" :custom-style="customStyle"
			@click="selectMenu">
			<uv-drop-down-item :name="item.name" :type="item.type" :label="dropItem(item.name).label"
				:value="dropItem(item.name).value" v-for="(item,idx) in zlist" :key="idx">
			</uv-drop-down-item>

		</uv-drop-down>
		<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
			@clickItem="clickItem" @popupChange="change"></uv-drop-down-popup>
	</view>
</template>

<script>
	export default {
		name: "MyTabbar",
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		watch:{
			list:{
				immediate:true,
				handler(val){
					console.log(val,"val")
					this.zlist = uni.$uv.deepClone(val)
				}
			}
		},
		data() {
			return {
				textStyle: {
					activeColor: 'red'
				},
				extraIcon: {
					name: 'arrow-down-fill',
					color: '#666',
					size: '26rpx'
				},
				extraActiveIcon: {
					name: 'arrow-up-fill',
					color: '#2878ff',
					size: '26rpx'
				},
				customStyle: {
					padding: '0 30rpx'
				},
				defaultValue: [0, 'all', '0'],
				result: [],
				activeName: 'order',
				zlist: []

			}
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						let find2 = this.zlist.find(item => item.name === name);
						result.label = find2.label;
						result.value = find2.value;
					}
					return result;
				}
			},
			currentDropItem() {
				const find = this.zlist.find(item => item.name === this.activeName);
				return find;
			}
		},
		methods: {
			init() {
				this.$refs.dropDown.init();
			},
			change(e) {
				console.log('弹窗打开状态：', e);
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					// 特殊处理
					const find = this.zlist.find(item => item.name === name);
					this.$emit("click", find)
				} else {
					console.log(this.result,"result")
					const find = this.result.find(item => item.name == this.activeName);
					
					const find2 = this.zlist.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = find2.child.findIndex(item => item.label == find.label && item
							.value == find.value);
						find2.activeIndex = findIndex;
					} else {
						find2.activeIndex = 0;
					}
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let {
					label,
					value
				} = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				const find = this.zlist.find(item => item.name == this.activeName)
				if (this.defaultValue.indexOf(value) > -1 && find.label) {
					label = find.label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				this.$emit("change", this.result)
			}
		}

	}
</script>

<style lang="scss" scoped>

</style>